<template>
	<view class="page">
		<u-navbar v-if='value!=3' :title="company.name" border leftIconSize='0' placeholder>
		</u-navbar>
		<view class="bodyBox">
			<home v-if="value==0" @click='click'/>
			<tag v-if="value==1" />
			<activePage v-if="value==2" />
			<shop v-if="value==3" @click='click'/>
			<my v-if="value==4" />
		</view>
		<view>
			<u-tabbar :value="value" :fixed="false" :placeholder="false" >
				<u-tabbar-item text="首页" icon="home" @click="click"></u-tabbar-item>
				<u-tabbar-item text="风格" icon="tags" @click="click"></u-tabbar-item>
				<u-tabbar-item text="关注" icon="photo" @click="click"></u-tabbar-item>
				<u-tabbar-item text="关于" icon="coupon" @click="click"></u-tabbar-item>
				<u-tabbar-item text="我的" icon="account" @click="click"></u-tabbar-item>
			</u-tabbar>
		</view>
	</view>
</template>

<script>
	import home from './components/home.vue'
	import tag from './components/tag.vue'
	import my from './components/my.vue'
	import activePage from './components/activePage.vue'
	import shop from './components/shop.vue'
	export default {
		components:{
			home,
			tag,
			my,
			shop,
			activePage
		},
		data() {
			return {
				value: 0
			}
		},
		computed: {
			company() {
				return {
					name: uni.getStorageSync('companyName'),
					logo: uni.getStorageSync('companyLogo'),
				}
			}
		},
		onLoad() {
			
		},
		methods: {
			click(e) {
				this.value = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		display: flex;
		height: 100vh;
		flex-direction: column;
		box-sizing: border-box;
	}

	.bodyBox {
		flex: 1;
		overflow: hidden;
	}
</style>